<template>
  <div class="app-container customer-div">
    <!--数据列表-->
    <div class="table-container">
      <vxe-grid ref='xGrid' v-bind="gridOptions" size="mini" :loading="listLoading"  @checkbox-change="checkboxChange" @checkbox-all="selectAllCheckboxChange">
        <template #form>
          <!--搜索-->
          <div>
            <div style="background: #f5f7fa;padding:15px 15px 0 15px;border:1px solid #EBEEF5;border-bottom:0.5px solid #EBEEF5;">
              <el-form :inline="true" :model="listQuery" size="mini" label-width="140px">
                <el-form-item label="品名：">
                  <el-input v-model="listQuery.categoryName" clearable></el-input>
                  <!-- <el-select style="width:150px" v-model="listQuery.categoryName">
                    <el-option v-for="item in sortList" :value="item.categoryName" :label="item.categoryName" :key="item.categoryId">
                    </el-option>
                  </el-select> -->
                </el-form-item>
                <el-form-item label="牌号：">
                  <el-input v-model="listQuery.goodsSn" clearable></el-input>
                  <!-- <el-select v-model="listQuery.goodsSn" filterable placeholder="请选择" clearable>
                    <el-option v-for = 'item in materialsList' :key ='item.materialId' :value="item.goodsSn" :label="item.goodsSn">
                    </el-option>
                  </el-select> -->
                </el-form-item>
                <!-- <el-form-item label="报价时间：">
                  <el-date-picker
                    v-model="listQuery.priceDate"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item> -->
                <el-form-item label="是否需审核下单：">
                  <el-select v-model="listQuery.isEnableOrder "  placeholder="请选择" clearable>
                    <el-option key="1" label="正常下单" value="1"></el-option>
                    <el-option key="0" label="需审核下单" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button
                    @click="handleSearchList()"
                    type="primary">
                    查询
                  </el-button>
                  <el-button
                    @click="addOrder(null)"
                    type="primary">
                    合并生成订单
                  </el-button>
                  <el-button
                    @click="addOrder(null,'承兑')"
                    type="primary">
                    承兑下单
                  </el-button>
                  <el-button
                    @click="askFreight()"
                    type="primary">
                    批量询运费
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </template>
        <template #pager>
          <div style="overflow: hidden">
            <div class="pagination-container" style="float:right;">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize"
                :page-sizes="[10,15,20,50,100,200]"
                :total="count">
              </el-pagination>
            </div>
          </div>
        </template>

        <template #toolbar_buttons>
          <el-radio-group v-model="listQuery.categoryName" size="small"  @change="handleSearchList">
            <el-radio-button v-for="(item,index) in goodsPriceCategoryLists" :label="item"  :key="index">{{ item }}</el-radio-button>
          </el-radio-group>
        </template>

        <template #num1_default="{ row, rowIndex }">
          <el-link @click="toDetail(row)" type="primary"  style="font-size:12px;">{{row.orderSn}}</el-link>
        </template>
        <template #num2_default="{ row, rowIndex }">
          <span>{{row.expectSendDate}}</span>
          <span style="background: red;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '必须'">必须</span>
          <span style="background:#ff6600;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '可延1-2天'">1-2天</span>
          <span style="background:#ff9900;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '可延1-2周'">1-2周</span>
          <span style="background:#0099ff;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '等客户通知'">等待</span>
        </template>
        <template #num3_default="{ row, rowIndex }">
          <!-- /{{ row.brandName }} -->
          <span>{{ row.categoryName }}/{{ row.goodsSn }}</span>
        </template>
        <template #num4_default="{ row, rowIndex }">
          <!-- <el-button style="margin-right:10px;" v-if="row.remainNum>0" type="text" size="small" @click=showLock(row)>锁货</el-button> -->
          <el-button style="margin-right:10px;" v-if="row.remainNum>0 && row.payTypes != '现汇'" type="text" size="small" :disabled=" row.isEnableOrder != 1" @click="addOrder(row)">立即下单</el-button>
          <el-dropdown trigger="click" size="mini" style="margin-right: 10px"
                       v-else-if="row.payTypes == '现汇' && row.remainNum>0">
            <span class="el-dropdown-link" style="cursor: pointer; color: #409eff; font-size: 12px">生成订单 <i class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button type="text" size="small" :disabled="row.isEnableOrder != 1" @click="addOrder(row)">正常下单</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button type="text" size="small" :disabled="row.isEnableOrder != 1" @click="addOrder(row,'承兑')">承兑下单</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button style="margin-right:10px;" v-if="row.sendTypes =='自提'&&row.remainNum>0" type="text" size="small" @click="askFreight(row)">询运费</el-button>
        </template>
        <!-- <template #num6_default="{ row, rowIndex }">
          <checkbox :disabled="row.remainNum<0"></checkbox>
        </template> -->

      </vxe-grid>
    </div>

    <!--询运费-->
    <freight @update="handleSearchList" ref="freight"></freight>

    <!--生成订单-->
    <addOrder @update="handleSearchList" ref="addOrder"></addOrder>

    <!-- 锁货 -->
    <!-- <addLock ref="addLock" @update="handleSearchList"></addLock> -->

  </div>
</template>

<script>

import {goodsPriceList} from '@/api/allInLine/goodsApply'
import {getPreOrderContent,goodsPriceCategoryList} from '@/api/allInLine/inquiry'
import {goodsSortList,getMaterialList}from '@/api/allInLine/goods'
import freight from './InquiryCom/freight'
import addOrder from './InquiryCom/addOrder'
// import addLock from './InquiryCom/addLock'
import store from '@/store'
import { mapGetters } from 'vuex'
import { Message } from 'element-ui';

const defaultListQuery={
  pageNum: 1,
  pageSize: 10,
  tab:'today',
  userId:'',
  goodsSn:'',  //牌号
  categoryName:'', //品名
  keywords:'',
  priceDate:'', //报价日期
  isEnableOrder:'',
};

export default {
  name: "index",
  data(){
    return{
      roles:store.getters.roles ? store.getters.roles : [],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      count:0,
      listLoading:false,
      loading:false,
      loading2:false,
      supplierList2:[],
      options:[],
      priceIds:'',
      userOptionList:[],
      sortList:[],
      materialsList:[],//牌号
      goodsPriceCategoryLists:[],
      type:1,
      gridOptions:{
        loading:this.listLoading,
        border: true,
        id: 'onePrice',
        align:'center',
        autoResize:true,
        height:800,
        size:'mini',
        columnConfig: {
          resizable: true
        },
        customConfig: {
          storage: true,
        },
        toolbarConfig: {
          zoom: true,
          custom: true,
          slots: {
            buttons: 'toolbar_buttons',
          }
        },
        columns: [
          { type: 'checkbox',
            title: '',
            width: 50,
          },
          {
            field: 'fromCompany',
            title: '供货方',
            width: 150,

          },
          {
            field: 'userName',
            title: '采购员',
            width: 100,
          },
          {
            field: 'goodsSn',
            title: '品名牌号',
            width: 120,
             slots: {
              // 使用插槽模板渲染
              default: 'num3_default',
            }
          },
          {
            field: 'purchasePrice',
            title: '报价',
            width: 100,
          },
          {
            field: 'remainNum',
            title: '可订数量(吨)',
            width: 120,
          },
          {
            field: 'sendArea',
            title: '发货地',
            width: 100,
          },
          {
            field: 'sendDate',
            title: '交期',
            width: 100,
          },
          {
            field: 'sendTypes',
            title: '发货方式',
            width: 100,
          },
          {
            field: 'payTypes',
            title: '交易方式',
            width: 100,
          },
          {
            field: 'deliveryType',
            title: '发货类型',
            width: 100,
          },
          {
            field: 'buyMinNum',
            title: '起订量(吨)',
            width: 120,
          },
          // {
          //   field: 'applyNum',
          //   title: '锁货数量(吨)',
          //   width: 120,
          // },
          {
            field: 'priceRemark',
            title: '报价备注',
            width: 100,
          },
          {
            field: 'updatedTime',
            title: '更新时间',
            minWidth: 100,
          },
          {
            field: "purchaseCompetitive",
            title: "竞争力",
            width: 100,
          },
          {
            field: "purchaseScore",
            title: "推荐值",
            width: 100,
          },
          {
            field: 'setting',
            title: '操作',
            width: 150,
            fixed:'right',
            slots: {
              // 使用 JSX 渲染
              default: 'num4_default',
            },
          },
        ],
        data:[{}],
      },
      records:[],
      goodsList:[]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {
    freight,
    addOrder,
    // addLock,
},
  created() {
    this.getListData();
    this.getGoodsSortList()
    this.getMaterialsList()
    this.getGoodsPriceCategoryList()
    // orderGoodsList().then((res)=>{
    //   this.goodsList = res.list
    // })

  },
  filters: {

  },
  methods: {
    checkboxChange(checked){
      this.records = this.$refs.xGrid.getCheckboxRecords()
    },
    selectAllCheckboxChange(checked) {
      this.records = checked.records
    },
    // changeType(type) {
    //   this.listQuery.categoryName = type;
    //   this.gridOptions.data = []
    //   this.handleSearchList()
    // },
    //生成订单
    addOrder(item,pricePayTypes){
      if(item){
        getPreOrderContent({priceIds:item.priceId,pricePayTypes:pricePayTypes}).then(()=>{
          this.$refs.addOrder.showPop('onePrice',[item],pricePayTypes)
        })
      }else{
        if (this.records.length > 0) {
          let remainNumFlag = this.records.every(item => item.remainNum > 0)
          if(remainNumFlag){
            const priceIdsNum = this.records.map(item => item.priceId)
            this.priceIds = priceIdsNum.join(',')
            getPreOrderContent({priceIds:this.priceIds,pricePayTypes:pricePayTypes}).then(()=>{
              this.$refs.addOrder.showPop('onePrice',this.records,pricePayTypes)
            })
          }else{
            Message.error('请勾选可订数量大于0的商品')
          }
        }else{
          Message.error('勾选需要生成的订单')
        }
      }
    },

    // 获取商品报价分类列表
    getGoodsPriceCategoryList(){
      goodsPriceCategoryList().then(res=>{
        this.goodsPriceCategoryLists = res
      })
    },

    // 询运费
    askFreight(item){
      if(item){
      this.$refs.freight.showPop([item],'oneprice')
      }else{
        if(this.records.length>0 ){
          if(this.records.every(item=>item.remainNum>0 && item.sendTypes=='自提')){
            this.$refs.freight.showPop(this.records,'oneprice')
          }else{
            Message.error('请勾选可订数量大于0和发货方式为自提的商品')
          }
        }else{
        Message.error('勾选需要询运费的订单')
        }
      }
    },
    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getListData();
      let typeFlag = this.goodsPriceCategoryLists.find((el) => {
        return el==this.listQuery.categoryName
      })
      if (typeFlag) {
        this.type=typeFlag
      } else {
        this.type=1
      }
    },
    // 品名
    getGoodsSortList(){
      goodsSortList().then(res=>{
        this.sortList = res
      })
    },
    // 牌号
    getMaterialsList(){
      getMaterialList({categoryName:'',keywords:''}).then(res=>{
        this.materialsList = res.list
      })

    },
    // 打开锁货
    // showLock(item){
    //   this.$refs.addLock.showPop('onePrice',item)
    // },

    //获取列表
    getListData(){
      this.listLoading = true;
      let data = JSON.parse(JSON.stringify(this.listQuery));
      goodsPriceList(data).then((res)=>{
        this.gridOptions.data = res.list;
        this.count = res.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      })
    },

    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.$refs.xGrid.clearCheckboxRow()
      this.records=[]
      this.getListData();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.$refs.xGrid.clearCheckboxRow()
      this.records=[]
      this.getListData();
    },

  },
}
</script>

<style scoped lang="scss">

</style>
